<template>
    <view class="rent-box">
         <u-grid :col="4" class="manageBox" :border="false">
            <u-grid-item v-for="(item, index) in appRentList" @click="jumpApp(item)" :key="item.appId">
                <view class="fee-item">
                    <!-- 图标：可替换为本地图片或uView图标 -->
                    <image :src='getIconSrc(item)' mode="aspectFit" class="fee-icon" />
                    <!-- <image :src="item.icon" mode="aspectFit" v-else 
                        class="fee-icon" /> -->
                    <text class="fee-label">{{ item.appName }}</text>
                </view>
            </u-grid-item>
        </u-grid>
    </view>
</template>

<script>
export default {
    props:{
        appRentList: Array,
    },
    data(){
        return {

        }
    },
    methods:{
        jumpApp(){},
         getIconSrc(item) {
            if (!item.refDevopsAppId) {
                // 自定义应用
                if (/^http/.test(item.appIcon)) {
                    return item.appIcon
                } else {
                    return `${this.$baseUrl}/${item.appIcon}`
                }
            }

            if (item.h5Icon) {
                if (item.h5Icon.indexOf('/roc-api-web/') > -1) {
                    let appendSrc = item.h5Icon.split('/roc-api-web/')[1]
                    let picSrc = this.$baseUrl + `/roc-api-web/${appendSrc}`
                    return picSrc
                } else {
                    if (/^http/.test(item.h5Icon)) {
                        return item.h5Icon
                    } else {
                        return this.$baseUrl + `/roc-api-web/static/mobileNew/${item.h5Icon}`
                    }
                }
            } else {
                let picSrc = this.$baseUrl + `/roc-api-web/static/mobileNew/${item.appName}.png`
                return picSrc
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.rent-box{
    margin-top: 20rpx;
    padding: 0 20rpx;
    background-color: #fff;
    border-radius: 40rpx;

}
.fee-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fee-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
}

.fee-label {
    font-size: 28rpx;
    color: #333;
    padding: 10rpx 0 20rpx 0rpx;
    box-sizing: border-box;
}
</style>

